<template>
  <div class="container">
    <Breadcrumb :items="['菜单模块', '菜单管理']" />
    <a-card class="general-card" title="菜单管理">
      <a-row>
        <a-col :flex="'86px'" style="text-align: right">
          <a-space :size="18">
            <a-button type="primary" @click="addForm('0', 0, '顶级')"   v-permission="'menu:add'">
              <template #icon>
                <icon-plus />
              </template>
              创建菜单
            </a-button>
            <a-button @click="fetchData">
              <template #icon>
                <icon-refresh />
              </template>
              刷新重置
            </a-button>

            <a-button @click="tipsMenu">
              <template #icon>
                <icon-question-circle />
              </template>
              <a-spin> 菜单说明</a-spin>
            </a-button>

            <a-button   @click="downMenuFile">
              <template #icon>
                <icon-download />
              </template>
               下载菜单文件
            </a-button>
          </a-space>
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="24">
          <a-table
            :expanded-keys="expandedKeys"
            :data="menuData"
            row-key="id"
            :pagination="false"
            style="margin-top: 20px"
            @expanded-change="expand"
          >
            <template #expand-icon>
              <icon-down />
            </template>
            <template #columns>
              <a-table-column title="菜单名称" data-index="meta.locale" />

              <a-table-column title="路由标识" data-index="name" />
              <a-table-column title="路由地址" data-index="path" />
              <a-table-column title="权限标识" data-index="meta.perm" />

              <a-table-column title="启用状态" data-index="menuEnable">
                <template #cell="{ record }">
                  <a-space>
                    <a-switch
                      v-model="record.menuEnable"
                      checked-color="green"
                      unchecked-color="#F53F3F"
                      disabled
                    />
                  </a-space>
                </template>
              </a-table-column>

              <a-table-column title="菜单类型" data-index="type">
                <template #cell="{ record }">
                  <a-space>
                    <a-tooltip v-if="record.menuType === 0" content="目录">
                      <icon-list /> <span>[目录]</span>
                    </a-tooltip>

                    <a-tooltip v-if="record.menuType === 1" content="菜单">
                      <icon-menu /><span>[菜单]</span>
                    </a-tooltip>

                    <a-tooltip v-if="record.menuType === 2" content="按钮">
                      <icon-play-arrow /><span>[按钮]</span>
                    </a-tooltip>

                    <a-tooltip v-if="record.menuType === 3" content="接口">
                      <icon-play-arrow /><span>[接口]</span>
                    </a-tooltip>
                  </a-space>
                </template>
              </a-table-column>

              <a-table-column title="认证权限" data-index="meta.requiresAuth">
                <template #cell="{ record }">
                  <a-space>
                    <a-switch
                      v-model="record.meta.requiresAuth"
                      checked-color="green"
                      unchecked-color="#F53F3F"
                      disabled
                    />
                  </a-space>
                </template>
              </a-table-column>

              <a-table-column title="菜单属性" data-index="meta">
                <template #cell="{ record }">
                  <a-space>
                    <a-tooltip
                      v-if="record.meta !== null"
                      :content="JSON.stringify(record.meta)"
                    >
                      <a-button>
                        <template #icon> <icon-computer /> </template>
                      </a-button>
                    </a-tooltip>
                  </a-space>
                </template>
              </a-table-column>

              <a-table-column title="排序" data-index="order"> </a-table-column>

              <a-table-column title="操作" data-index="operations">
                <template #cell="{ record }">
                  <a-button
                    v-permission="'menu:edit'"
                    type="dashed"
                    size="small"
                    status="warning"
                    @click="editForm(record.id)"
                  >
                    编辑子项
                  </a-button>


                  <a-divider direction="vertical"  v-permission="'menu:add'"/>
                  <a-button
                    v-if="record.menuType !== 2"
                    v-permission="'menu:add'"
                    type="dashed"
                    size="small"
                    status="success"
                    @click="
                      addForm(record.id, record.menuType + 1, record.menuName)
                    "
                  >
                    新增子项
                  </a-button>


                  <a-divider direction="vertical"   v-permission="'menu:delete'" />
                  <a-popconfirm
                    content="确定删除?"
                    type="warning"
                    @ok="deleteRow(record.id)"
                  >
                    <a-button
                      v-permission="'menu:delete'"
                      type="dashed"
                      size="small"
                      status="warning"
                    >
                      删除
                    </a-button>
                  </a-popconfirm>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </a-col>
      </a-row>
      <Form ref="formRef" @ok="fetchData" />
      <Tips ref="tipRef" @ok="fetchData" />
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import useLoading from '@/hooks/loading';
  import { menu, menuTrees, removeRow ,downTs} from '@/api/menu';
  import { Message } from '@arco-design/web-vue';
  import {down} from "@/utils";
  import Tips from './tips.vue';
  import Form from './form.vue';

  const menuData = ref<menu[]>([]);
  const expandedKeys = ref<string[]>([]);
  const { loading, setLoading } = useLoading();
  const expand = (e: any[]) => {
    expandedKeys.value = [...e];
  };
  const formRef = ref<any>();
  const tipRef = ref<any>();

  const addForm = async (pid: string, type: number, parentName: string) => {
    formRef.value.addForm(pid, type, parentName);
  };

  const editForm = async (id: string) => {
    formRef.value.editForm(id);
  };

  const tipsMenu = async () => {
     tipRef.value.show();
  };


  const fetchData = async () => {
    setLoading(true);
    try {
      const { data } = await menuTrees();
      menuData.value = data;
    } catch (err) {
      console.log(err);
    } finally {
      setLoading(false);
    }
  };
  fetchData();

  const deleteRow = async (id: string) => {
     await removeRow(id);
     await fetchData();
     Message.success('操作成功!');
  };
  const downMenuFile = async () => {
     const res =  await downTs();
    const blob = new Blob([res.data])
    down(blob,'ts',res)
  }
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 20px 10px;
  }

  .content-style {
  }

  :deep(.arco-table-th) {
    &:last-child {
      .arco-table-th-item-title {
        margin-left: 16px;
      }
    }
  }
</style>
